<template>
	<view class="content">
		<!-- 比赛 -->
		<!-- v-if="show_index == 0"  :style="{'display':show_index == 0 ?'block':'none'}" -->
		<view :style="{'display':show_index == 0 ?'block':'none'}">
			<tab-game v-if="show_index == 0" ref="game" style="width: 100%;"></tab-game>
		</view>
		<!-- 发现 -->
		<!-- v-if="show_index == 1"  :style="{'display':show_index == 1 ?'flex':'none'}" -->
		<view :style="{'display':show_index == 1 ?'flex':'none'}">
			<tab-discovery v-if="show_index == 1" :loadmore="loadmore" ref="discovery" style="width: 100%;"></tab-discovery>
		</view>
		<!-- 数据 -->
		<!-- v-if="show_index == 2" :style="{'display':show_index == 2? 'block':'none'}"  -->
	<!-- 	<view :style="{'display':show_index == 2? 'block':'none'}">
			<tab-data v-if="show_index == 2" ref="data" style="width: 100%;"></tab-data>
		</view> -->
		<!-- 资讯 -->
		<!--v-if="show_index == 3"  :style="{'display':show_index == 3 ?'block':'none'}"  -->
		<view :style="{'display':show_index == 2 ?'block':'none'}">
			<tab-mall v-if="show_index == 2" :loadmore="loadmore" ref="information" style="width: 100%;"></tab-mall>
		</view>
		<!-- 个人中心 -->
		<!--v-if="show_index == 4"  :style="{'display':show_index == 4 ? 'flex':'none'}"  -->
		<view :style="{'display':show_index == 3 ?'flex':'none'}">
			<tab-mycenter v-if="show_index == 3" :style="{'display':show_index == 3 ? 'flex':'none'}" ref="mycenter" style="width: 100%;"></tab-mycenter>
		</view>
		<!-- is_lhp判断是否为刘海屏在main.js里，好像uniapp有一个css变量获取刘海屏的安全区域 -->
		<view class="tabBar" :style="{height:is_lhp?'140rpx':'98rpx'}">
			<!-- 导航的中间圆圈 --> 
		<!-- 	<view class="border_box" :style="{paddingBottom:is_lhp?'40rpx':''}">
				<view class="tabBar_miden_border"></view>
			</view> -->
			<view class="tabBar_list" :style="{paddingBottom:is_lhp?'40rpx':''}">
				<view v-for="(item) in tab_nav_list" :key="item.id" class="tabBar_item" @tap="cut_index(item.id)">
					<image class="tab-image" v-if="show_index == item.id"  :src="`../../static/tabBar/${item.id+1}${item.id+1}.png`"></image>
					<image class="tab-image" v-else :src="`../../static/tabBar/${item.id+1}.png`"></image>
					<view :class="{'tabBar_name':true,'nav_active':show_index == item.id}">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabGame from '@/components/tabBar/game.vue'
	import tabDiscovery from '@/components/tabBar/order.vue'
	import tabMall from '@/components/tabBar/mall.vue'
	import tabData from '@/components/tabBar/Data.vue'
	import tabMycenter from '@/components/tabBar/mycenter.vue'
	export default {
		components: {
			tabGame,//首页    0
			tabDiscovery,//订单    1
			tabMall,//一键回收   2
			tabData,//积分商城   3
			tabMycenter//个人中心  4
		},
		  /**
		   * 用户点击右上角分享
		   */
		onShareAppMessage: function () {
		    return {
		      title: "花呗回收",
		      path:`/pages/index/index` 
		    }
		},
		data() {
			return {
				show_index:0,//控制显示那个组件
				tab_nav_list :[{'id':0,'name':'首页'},{'id':1,'name':'订单'},{'id':2,'name':'积分商城'},{'id':3,'name':'我的'}],//菜单列表
				is_lhp:false,
				loadmore:1
			}
		},
		onReachBottom() {
		  if (this.show_index == 1 || this.show_index == 3) {
			console.log('上拉加载')
			this.loadmore = Math.random() + this.show_index
			console.log(this.loadmore)
		  }
		},
		onPullDownRefresh(){
			setTimeout(() => {
				wx.stopPullDownRefresh()
			},500)
		},
		onShow(){
			console.log(this.show_index)
			// if(this.show_index==2){
			// 	this.show_index = 0;
			// }
			if(getApp().globalData.index>=1){
				this.show_index = getApp().globalData.index
			}
			
			this.getMapKey()
		},
		methods: {
			getMapKey(){
				//other/geocoder
				this.$http.getkey().then(res => {
					console.log(res)
					if(res.msg){
						uni.setStorageSync('mapKey',res.msg.key)
					}
				})
			},
			// 切换组件
			cut_index(type){
				console.log('----------------------------------',type)
				let _this = this
				_this.show_index = type
				if(_this.show_index == 0){
					uni.setNavigationBarTitle({
						title: '花呗回收'
					});
				}
				else if(_this.show_index == 1){
					uni.setNavigationBarTitle({
						title: '订单'
					});
				}
				// else if(_this.show_index == 2){
				// 	uni.navigateTo({
				// 		url: `/pages/index/appointment`
				// 	})
				// }
				else if(_this.show_index == 2){
					uni.setNavigationBarTitle({
						title: '积分商城'
					});
				}
				else if(_this.show_index == 3){
					uni.setNavigationBarTitle({
						title: '我的'
					});
				}
			}
		}
	}
</script>

<style>
	
	.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
			background-color: #3E9AFC !important;
		}
</style>
<style lang="scss">
	.content{
		width: 100%;
		min-height: 100%;
		    background-color: #FAFAFA;
	}
	.tabBar{ width:100%;height: 98rpx;background: #fff;border-top:1px solid #E5E5E5;position: fixed;bottom:0px;left:0px;right:0px;display: flex;align-items: center;justify-content: center;
		.tabBar_list{ width:95%;display: flex;justify-content: space-between;
			.tab-image{width:25px;height: 25px;margin-bottom:2rpx}
			.tabBar_item{ width:100rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 20rpx;color: #969BA3;}
			.tabBar_item2{
				width:100rpx;height:100%;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 20rpx;color: #969BA3;margin-top:-64rpx;position: relative;z-index: 101;
				image{ width:114rpx;height: 114rpx;}
			}
		 } 
	}
	.border_box{
		// pointer-events: none; 事件穿透解决z-index层级问题
		width:100%;height: 100rpx;display: flex;justify-content: center;align-items: center;position: fixed;left:0px;bottom:50rpx;z-index: 100;pointer-events: none;
		.tabBar_miden_border{   width:100rpx;height:50rpx;border-top:2rpx solid #E5E5E5;border-radius:50rpx 50rpx 0 0; /* 左上、右上、右下、左下 */background: #fff;}
	}
	.nav_active{color: #3E9AFC;}
</style>
